<template>
    <vue-office-docx
            :src="docx"
            style="height: 100vh;"
            @rendered="renderedHandler"
            @error="errorHandler"
    />
</template>

<script setup>
import {onMounted, ref} from "vue";
import {ElLoading, ElMessage} from "element-plus";
import {useRouter} from "vue-router";
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'

const router = useRouter();
let getFileUrlKey = router.currentRoute.value.params.fileUrlKey;
const docx = ref(null);
const loading = ref(null);

const renderedHandler = () => {
    console.log('rendered');
    if(loading.value){
        loading.value.close();
    }
};


const errorHandler = (err) => {
    ElMessage.error('加载失败!');
    if (loading.value){
        loading.value.close();
    }
    console.log(err);
};



onMounted(() => {
    if (getFileUrlKey !== '') {
        let fileUrlKey = getFileUrlKey.replaceAll("@", "/");
        fileUrlKey = `http://116.169.61.207:12008/gxsst/` + fileUrlKey;
        loading.value = ElLoading.service({
            lock: true,
            text: 'loading...',
            background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
            docx.value = fileUrlKey;
        }, 1000);
    }
});
</script>
